<template>
  <div class="fist">
    <mynav></mynav>
    <mytabbar></mytabbar>
    <van-tabs @click="getvideo">
      <van-tab
        v-for="iconArr in iconArrs"
        :key="iconArr.id"
        :title="iconArr.title"
        class="fist-content"
        :name="iconArr.id"
      >
        <div class="cont-video" @click="goBofang(video.id)" v-for="video in videos" :key="video.id">
          <div class="video">
            <img :src="video.img_url" alt />
          </div>
          <div class="video-desc">
            <span class="title">{{video.title}}</span>
            <p class="num">
              <span class="num-l">10.5万次播放</span>
              <span class="num-r">{{video.likes}}赞</span>
            </p>
          </div>
        </div>
        <van-overlay :show="show" class="van-overlay">
          <div class="overlay-cont">
            <div class="cont-top">
              <p>
                <span class="c iconfont icon-guanbi" @click="show = false"></span>
                <span class="sousuo">
                  <i class="iconfont icon-sousuo"></i>
                  <i class="iconfont icon-gengduo"></i>
                </span>
              </p>
            </div>
            <div class="cont-video">
              <video
                autoplay="autoplay"
                muted="muted"
                loop
                :src="Onevideos.video_url"
                class="video"
              ></video>
            </div>
            <div class="video-up">
              <div class="up-l">
                <p></p>
                <p></p>
              </div>
              <div class="up-r">
                <p>
                  <span class="iconfont icon-paisheluxiang"></span>
                  <span>跟拍</span>
                </p>
                <p>
                  <span
                    class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
                    @click="clickzan"
                  ></span>
                  <span>{{Onevideos.likes}}</span>
                </p>
                <p>
                  <span class="iconfont icon-pinglun" @click="showPopup"></span>
                  <span>{{comments.length}}</span>
                </p>
                <p>
                  <span class="iconfont icon-fenxiang"></span>
                  <span>分享</span>
                </p>
              </div>
            </div>
            <div class="cont-buttom">
              <p class="disc" @click="showPopup">
                <span class="iconfont icon-xiepinglun">写评论...</span>
              </p>
            </div>
            <!-- <van-popup v-model="MoreShow" round position="bottom" closeable close-icon-position="top-left" :style="{ height: '50%' }">内容</van-popup> -->
            <van-popup
              v-model="discShow"
              round
              position="bottom"
              closeable
              close-icon-position="top-left"
              :style="{ height: '80%' }"
            >
              <p class="null"></p>
              <!-- <div class="van-cart"> -->
              <van-card
                v-for="comment in comments"
                :key="comment.id"
                :thumb="comment.headimg"
                class="des-cart"
              >
                <template slot="title">
                  <span style="font-weight:bold">{{comment.u_name}}</span>
                </template>
                <template slot="desc">
                  <span style="color:#000">{{comment.title}}</span>
                </template>
                <template slot="num">
                  <span
                    class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
                    @click="clickDes(comment.id)"
                  >{{comment.likes}}</span>
                </template>
                <template slot="price">
                  <span style="color:#ccc">{{comment.time}}</span>
                </template>
              </van-card>
              <!-- </div> -->
              <div class="write-bottom">
                <input
                  type="text"
                  placeholder="写评论..."
                  style="color:#000"
                  class="input"
                  v-model="content"
                />
                <van-button type="default" mini round @click="writeComment">发送</van-button>
              </div>
            </van-popup>
          </div>
        </van-overlay>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import mynav from '@/components/Mynav'
import mytabbar from '@/components/Mytabbar'

export default {
  data: () => ({
    show: false,
    MoreShow: false,
    discShow: false,
    videos: [],
    iconArrs: [],
    comments: [],
    Onevideos: {},
    content: '',
    videoId: 4,
    active: 0,
    flag: true,
    isclick: true
  }),
  created () {
    // this.id = this.$Toast.pramas()
    this.getvideo(55)
    this.geticonarr(3)
    // this.getcomment()
    this.getOnevideo()
  },
  methods: {
    async geticonarr (id) {
      const {
        data: { status, data }
      } = await this.$http.get('api/getnavlist/' + id)
      if (status !== 0) this.$Toast(data)
      this.iconArrs = data
    },
    async getvideo (index) {
      const {
        data: { status, data }
      } = await this.$http.get('api/getnewsvideo/' + index)
      if (status !== 0) return this.$Toast(data)
      this.videos = data
    },
    async getcomment () {
      const {
        data: { status, data }
      } = await this.$http.get('api/getcomment/' + this.videoId)
      if (status !== 0) return this.$Toast(data)
      this.comments = data
    },
    showPopup () {
      this.MoreShow = true
      this.discShow = true
    },
    goBofang (id) {
      this.show = true
      this.videoId = id
      this.getOnevideo()
      this.getcomment()
    },
    clickzan () {
      if (this.flag) {
        this.$http.get(`api/addnewslike/${this.videoId}/1`)
      } else {
        this.$http.get(`api/addnewslike/${this.videoId}/-1`)
      }
      this.flag = !this.flag
      this.getOnevideo()
    },
    clickDes (index) {
      if (this.isclick) {
        this.$http.get(`api/addlike/${index}/1`)
      } else {
        this.$http.get(`api/addlike/${index}/-1`)
      }
      this.isclick = !this.isclick
      this.getcomment()
    },
    async getOnevideo () {
      const {
        data: { status, data }
      } = await this.$http.get('api/getnews/' + this.videoId)
      if (status !== 0) return this.$Toast(data)
      this.Onevideos = data[0]
    },
    async writeComment () {
      let { u_id: num } = JSON.parse(localStorage.getItem('users'))[0]
      const {
        data: { status, reason }
      } = await this.$http.get(
        `/api/addcomment?u_id=${num}&new_id=${this.videoId}&title=${this.content}`
      )
      if (status !== 0) return this.$Toast(reason)
      this.content = ''
      this.getcomment()
    }
  },
  components: {
    mynav,
    mytabbar
  }
}
</script>
<style lang="less" scoped>
.van-nav-bar{
  z-index: 2 !important;
}
.van-tabs{
  padding: 46px 0 50px 0;
}
.fist {
  padding: 2px;
  .fist-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .video {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cont-video {
      width: 49%;
      height: 300px;
      border: 1px solid #cccccc;
      position: relative;
      margin-bottom: 4px;
    }
    .video-desc {
      width: 100%;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      box-sizing: border-box;
      color: #fff;
      .num {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        .num-l {
          width: 50%;
        }
        .num-r {
          width: 50%;
          text-align: right;
        }
      }
    }
  }
  .van-overlay {
    width: 100%;
    z-index: 2 !important;
    .overlay-cont {
      width: 100%;
      z-index: 100;
      color: #fff;
      .cont-top {
        width: 100%;
        padding: 0 10px;
        p {
          display: flex;
          justify-content: space-between;
          .c {
            font-size: 24px;
          }
          .sousuo {
            i {
              font-size: 24px;
              margin-right: 20px;
            }
          }
        }
      }
      .cont-video {
        width: 99%;
        height: 550px;
      }
      .video-up {
        width: 100%;
        position: absolute;
        bottom: 65px;
        left: 0px;
        .up-r {
          width: 40px;
          position: absolute;
          bottom: 20px;
          right: 20px;
          text-align: center;
          p {
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
              font-size: 14px;
            }
            .iconfont {
              font-size: 32px;
            }
          }
        }
      }
      .cont-buttom {
        width: 100%;
        height: 55px;
        position: relative;
        bottom: 0px;
        color: #fff;
        padding-left: 10px;
        border-top: 1px solid #ccc;
      }
    }
  }
  .write-bottom {
    height: 40px;
    width: 100%;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    background: #cccccc;
    .input {
      border: 1px solid #cccccc;
      width: 300px;
      height: 30px;
      border-radius: 20px;
      padding-left: 10px;
    }
  }
  .des-cart {
    line-height: 30px;
  }
  .null {
    width: 100%;
    height: 20px;
  }
}
</style>
